<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
        <FormItem label="用户名" prop="userName">
            <Input v-model="formValidate.userName" placeholder="输入用户名"></Input>
        </FormItem>
        <FormItem label="用户密码" prop="passWord">
            <Input type="password" v-model="formValidate.passWord" placeholder="输入用户密码"></Input>
        </FormItem>
        <FormItem label="再次输入密码" prop="passWord2">
            <Input type="password" v-model="formValidate.passWord2" placeholder="输入用户密码"></Input>
        </FormItem>
        <FormItem label="用户姓名" prop="name">
            <Input v-model="formValidate.name" placeholder="输入用户姓名"></Input>
        </FormItem>
        <FormItem label="手机号码" prop="accountPhone">
            <Input v-model="formValidate.accountPhone" placeholder="输入手机号码"></Input>
        </FormItem>
        <FormItem label="角色" prop="userRoles">
            <Select  v-model="formValidate.userRoles" multiple filterable placeholder="选择机构负责人">
                <i-option  v-for="role in roles" :value="role.code" :key="role.code">{{role.role}}</i-option>
            </Select>
        </FormItem>
        <FormItem label="机构" prop="userOrganizations">
            <Select  v-model="formValidate.userOrganizations" multiple filterable placeholder="选择机构负责人">
                <i-option  v-for="organization in organizations" :value="organization.code" :key="organization.code">{{organization.name}}</i-option>
            </Select>
        </FormItem>
        <FormItem >
            <Button   @click="handleCancel()" style=" float: right; ">取消</Button>
            <Button  type="primary" @click="handlePost('formValidate')" style=" float: right; margin-right: 8px" >保存</Button>
        </FormItem>
    </Form>
</template>
<script>
    import api  from '../../../libs/api';
    import {eventBus} from "../../../libs/eventBus";
    import validate from '../../../libs/validator';
    export default {
        name: 'user_add',
        data() {
            //密码验证
            var validatePassWord = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.formValidate.passWord2 !== ""&&value!=this.formValidate.passWord2) {
                        callback(new Error("两次密码输入不一致"));
                    }
                    callback();
                }
            };
            //密码验证2
            var validatePassWord2 = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.formValidate.passWord !== ""&&value!=this.formValidate.passWord) {
                        callback(new Error("两次密码输入不一致"));
                    }
                    callback();
                }
            };

            return {
                formValidate: {
                    userName: '',
                    passWord: '',
                    passWord2:"",
                    name: '',
                    accountPhone:""
                },
                organizations:[],
                roles:[],
                ruleValidate: {
                    userName: [
                        { required: true, message: '用户名不允许为空', trigger: 'blur' }
                    ],
                    passWord: [
                        { required: true, message: '密码不允许为空', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6', trigger: 'blur' },
                        { validator: validatePassWord, trigger: 'blur' }

                    ],
                    passWord2: [
                        { required: true, message: '密码不允许为空', trigger: 'blur' },
                        { type: 'string', min: 6, message: '密码长度不能小于6', trigger: 'blur' },
                        { validator: validatePassWord2, trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '姓名不允许为空', trigger: 'blur' }
                    ],
                    accountPhone: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                          { validator: validate.phone, trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            handlePost (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$post(api.users.base,this.formValidate).then(response => {
                            if(200==response.code){
                                this.$refs[name].resetFields();
                                eventBus.$emit("closeModal",false);
                                eventBus.$emit("freshenUserList");
                            }
                        });
                    }
                })
            },
            handleCancel(){
                this.$refs["formValidate"].resetFields();
                eventBus.$emit("closeModal",false);
            },
            //加载角色
            handleRoles(){
                let self=this;
                self.roles=[];
                this.$get(api.users.roles,{}).then(response=>{
                    self.roles=(response.obj==null?[]:response.obj);
                });
            },
            //加载组织机构
            handleOrganizations(){
                let self=this;
                self.organizations=[];
                self.$get(api.users.organizations,{}).then(response=>{
                    self.organizations=(response.obj==null?[]:response.obj);
                });
            },

        },
        mounted(){
            this.handleRoles();
            this.handleOrganizations();
        }
    }
</script>